<template>
	<view class="main_container">
		<wanl-navbar :isBack="true" :background="{background: '#fff',}">
			<text
				slot="content"
				style="color: #000; width: 100%;padding-left: 20rpx;"
			>
				抽奖
			</text>
			<text
				slot="right"
				style="color: #000;text-align:  right;padding-right: 20rpx;font-size: 28rpx"
				@click="jump()"
			>
				抽奖记录
			</text>
		</wanl-navbar>
		<view class="turntable_box">
			<view class="container">
				<view
					v-for="(item, index) in drawList(awards)"
					:key="index"
					class="prize-item"
					:class="[item.name == '开始抽奖'?'kongbai':'']"
					@click="item.name == '开始抽奖'?start():''"
				>
					<view class="active" v-if="currentIndex === index"></view>
					<image :src="$wanlshop.oss(item.img,50,50)" alt="" v-if="item.name != '开始抽奖'"/>
					<p class="desc" v-if="item.name != '开始抽奖'">{{ item.name }}</p>
					<view v-if="item.name == '开始抽奖'" style="position: relative;width: 100%;height:100%">
						<image :src="item.img" alt="" style="width: 120%;height: 100%;"/>
						<p style="
						position: absolute;
						top: 26%;
                        left: 23%;
					    display: flex;
					    justify-content: center;
					    align-items: center;
					    flex-direction: column;
					    background: rgb(245, 56, 56);
					    position: absolute;
					    border-radius: 50%;">
							<view style="color: #FFEC38;font-size: 32rpx;">
								抽奖
							</view>
							<view style="color:#fff;font-size: 20rpx;line-height: 30rpx"> {{ money }}元宝/次 </view>
						</p>
					</view>
				</view>
			</view>
			<view class="guize">
				<view class="guize_title">
					<image style="width: 180rpx;" mode="widthFix"  src="https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jieshao.png"></image>
				</view>
				<view class="guize_item" v-html="awardsRule">
<!--					1.本次抽奖活动共持续7天，每个id每天可抽奖一次；-->
				</view>
<!--				<view class="guize_item">-->
<!--					2.包括一等奖1个、二等奖3个和三等奖5个；其中一等奖奖品为松下吹风机（价值500元），二等奖奖品为小熊烧水壶（价值200元），三等奖奖品为超市50元代金券。-->
<!--				</view>-->
<!--				<view class="guize_item">-->
<!--					3.中奖的用户可凭中奖页面至XXX路1号店内兑换奖品！-->
<!--				</view>-->
			</view>
		</view>
		<u-popup :show="showZhongjiang" :closeOnClickOverlay="true"
		         :closeable="true"
		         :overlayOpacity="0.7" mode="center"
		         :customStyle="{background:'transparent'}"
		         @close="showZhongjiang=false">
			<view class="lingjiangPopup">
				<view class="jiangpinContent">
					<view style="background: #fff2e6;width: 70%; height: 179px;margin:220rpx auto 0;display: flex;flex-direction: column;justify-content: center;align-items: center">
						<view style="color:#F12E1A;font-weight: bold;margin-bottom: 16rpx;">恭喜您获得{{award.name}}!</view>
						<view style="color:#F12E1A;font-weight: bold;margin-bottom: 16rpx; font-size:34rpx">{{ goodsData.goods_name }}一个</view>
						<image :src="goodsData.goods_img" style="width:240rpx;height: 240rpx;" mode="widthFix"></image>
					</view>
				</view>
				<view class="lingquBtn"  @click="showZhongjiang=false;lingqu()">
<!--					<image :src="'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/lingqu.png'" style="width: 100%;height:100rpx; " mode="widthFix"></image>-->
				</view>
			</view>
			
		</u-popup>
		<u-popup
			:show="showWeizhongjiang"
			:overlayOpacity="0.7"
			:closeable="true"
			:closeOnClickOverlay="true"
			mode="center"
			:customStyle="{background:'transparent'}"
			@close="showWeizhongjiang=false">
			<view class="weilingjiangPopup">
				<view class="jiangpinContent">
					<view style="width: 70%;height: 200px;margin:24px auto 0;display: flex;flex-direction: column;justify-content: center;align-items: center">
						<view style="color:#8C3F23;font-weight: bold;margin-bottom: 16rpx;">很遗憾</view>
						<view style="color:#8C3F23;font-weight: bold;margin-bottom: 16rpx;">您没有中奖</view>
					</view>
					<view class="lingquBtn"  @click="showWeizhongjiang=false">
<!--						<image :src="'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/weizhongjiangBtn.png'" style="width: 100%;" mode="widthFix"></image>-->
					</view>
				</view>
				
			</view>
		
		</u-popup>
	</view>
</template>
<script>
export default {
	name: "nineSquaredPaper",
	data() {
		return {
			awards: [
				// // 图片名字与ID
				// { id: 1, name: 10,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin1.png',desc: '一等奖' },
				// { id: 2, name: 100,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin2.png' ,desc: '二等奖' },
				// { id: 3, name: 2,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin3.png' ,desc: '三等奖' },
				// { id: 4, name: 1,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin4.png' ,desc: '四等奖' },
				// { id: 5, name: 5,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin5.png' ,desc: '五等奖' },
				// { id: 6, name: 50,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin6.png',desc: '谢谢参与'  },
				// { id: 7, name: 0,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin7.png' ,desc: '代金券' },
				// { id: 8, name: 5,url:'https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/jiangpin8.png',desc: '谢谢参与' }
			],
			btnStart: { img: 'https://d-shenhuashop.bigchun.com/h5test/yuanbao/start_btn.png', name: '开始抽奖' },
			isDrawing:false,
			drawOrder : [0, 1, 2, 5, 8, 7, 6, 3], // 抽奖顺序
			current: 0, // 当前索引值
			currentIndex:'',
			speed: 200, // 时间->速度
			diff: 15, // 基数
			award: {}, // 抽中的奖品
			time: 0, // 当前时间戳
			timer: null, // 定时器
			showZhongjiang:false,
			showWeizhongjiang:false,
			goodsData:{},
			awardsRule:'',
			money:''
		};
	},
	onLoad(){
		this.getDrawList();
		this.getDrawRule()
	},
	methods: {
		jump(){
			this.$wanlshop.to('/pages/apps/jinyuanbao/choujiang/choujiangHistory')
		},
		getDrawList(){
			uni.request({
				url: '/wanlshop/user/gift_lists',
				method: 'POST',
				data: {
				},
				success: res => {
					uni.stopPullDownRefresh();
					this.awards = res.data; //数据 追加
				}
			});
		},
		getDrawRule(){
			uni.request({
				url: '/wanlshop/user/get_gift_config',
				method: 'POST',
				data: {
				},
				success: res => {
					this.money = res.data.money;
					this.awardsRule = res.data.gift_get_yuanbao_ule; //数据 追加
				}
			});
		},
		
		drawList (){
			return [...this.awards.slice(0, 4), this.btnStart, ...this.awards.slice(4)]
		},
		// 开始抽奖
		start() {
			// 开始抽奖
			this.getLottery();
			this.current= 0, // 当前索引值
			this.currentIndex ='';
			this.timer = null;
			this.time = Date.now();
			this.speed = 200;
			this.diff = 12;
		},
		// 调接口获取奖品
		getLottery() {
			uni.request({
				url: '/wanlshop/user/get_gift',
				method: 'POST',
				data: {
				},
				success: (res) => {
					console.log("0000",res)
					if(res.res.code == '1'){
						this.award.name = res.data.name;
						this.award.id = res.data.id;
						this.award.log_id = res.data.log_id;
						this.goodsData= res.data;
						this.move();
					}else{
						uni.showToast({
							title:`金元宝不足，请前往充值页面充值`,
							icon: 'none'
						});
					}
				}
			});
		},
		// 开始转动
		move() {
			this.timer = setTimeout(() => {
				this.current++;
				if (this.current > 7) {
					this.current = 0;
				}
				this.currentIndex = this.drawOrder[this.current];
				// 若抽中的奖品id存在，则开始减速转动
				if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
					this.speed += this.diff; // 转动减速
					// 若转动时间超过4秒，并且奖品id等于小格子的奖品id，则停下来
					if (
						(Date.now() - this.time) / 1000 > 4 &&
						this.award.id == this.drawList(this.awards)[this.currentIndex].id
					) {
						clearTimeout(this.timer);
						setTimeout(() => {
							if(this.award.name=='谢谢惠顾'){
								this.showWeizhongjiang = true;
							}else{
								this.showZhongjiang = true;
							}
						}, 0);
						return;
					}
				}
				else {
					// 若抽中的奖品不存在，则加速转动
					this.speed -= this.diff;
				}
				this.move();
			}, this.speed);
			
		},
		lingqu(){
			let good_data = [{
				goods_name:this.goodsData.goods_name,
				goods_img:this.goodsData.goods_img,
				goods_id:this.goodsData.goods_id,
			}]
			this.$wanlshop.to(`/pages/apps/jinyuanbao/shangpin/tijiaoOrder?good_data=${JSON.stringify(good_data)}&id=${this.award.log_id}`);
		}
	}
};
</script>
<style  lang="scss" scoped>
.main_container {
	width: 100%;
	min-height: 100%;
	background-color: #FF7F00;
	background-size: 100% auto;
	background-repeat: no-repeat;
	font-size: 26px;
	// 作用: 禁用弹窗里的滑动影响页面滑动
	&.prohibit {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	// 设置占位符字体颜色
	input::-webkit-input-placeholder {
		color: #a4a5a6;
		font-size: 26px;
	}
	padding: 0px 0px;
	.turntable_box {
		border: 0.5rpx solid transparent;
		width: 100%;
		min-height: 100vh;
		background: url(https://d-shenhuashop.bigchun.com/h5test/yuanbao/bg_chou.png) no-repeat center;
		background-size: 100%;
		background-position-y: 0;
		
		.container {
			width: 69vw;
			background: #fcebde;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: space-between;
			margin:60vw auto 0;
			.prize-item {
				width: 33%;
				height: 21.5vw;
				background: #FDE8CC;
				box-shadow: inset 0px 0px 13px 0px #FFFAF2;
				border-radius: 4px 4px 4px 4px;
				border: 2px solid #FDDAB7;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				position: relative;
				image {
					wwidth: 100% ;
					height: 100%;
					margin-top: 4rpx;
				}
				p{
					font-size: 28rpx;
					color: #F14931;
				}
				.active {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					border: 6rpx solid #FC5351;
					z-index: 1000;
					border-radius: 12rpx;
				}
			}
			.kongbai{
				background: transparent;
				box-shadow: inset 0px 0px 13px 0px transparent;
				border-radius: 4px 4px 4px 4px;
				border: 2px solid transparent;
			}
			
			
		}
	}
	.guize{
		width: 94vw;
		margin:100rpx auto 0;
		background: #FDE8CC;
		border-radius: 30rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;
		padding:50rpx 30rpx 30rpx;
		position: relative;
		.guize_item{
			width: 100%;
			color: #333333;
			line-height: 24px;
			text-align: left;
		}
		.guize_title{
			position: absolute;
			left: 0rpx;
			top: -30rpx;
		}
	}
}
.lingjiangPopup{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 80vw;
	height: 62vh;
	.jiangpinContent{
		width: 100%;
		height: 100%;
		background: url('https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/zhongjiangBg.png') no-repeat center;
		background-size: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-bottom: 38rpx;
	}
	.lingquBtn{
		width: 100%;
		height:100rpx;
		background: url('https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/lingqu.png') no-repeat center;
		background-size: 100%;
	}
}
.weilingjiangPopup{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 80vw;
	height: 130vw;
	.jiangpinContent{
		width: 100%;
		height: 80%;
		background: url('https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/weizhongjiangBg.png') no-repeat center;
		background-size: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.lingquBtn{
		width: 63%;
		height: 116rpx;
		background: url('https://d-shenhuashop.bigchun.com/h5test/yuanbao/choujiang/weizhongjiangBtn.png') no-repeat center;
		background-size: 100%;
	}
}
</style>